
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Mtons UI</title>

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="../../dist/css/dashboard.css" rel="stylesheet">

<script src="../../depends/jquery.min.js"></script>
</head>

<body>
	<div class="container-fluid">

		<div class="row">
			<h2 class="sub-header">Drag</h2>

			<p>创建一个可拖动元素</p>
			<div class="table-responsive">
				<table class="table table-striped" style="width: 600px;">
					<tr>
						<th>方法</th>
						<th>说明</th>
					</tr>
					<tr>
						<td>proxy</td>
						<td>拖拽事件触发后, 使用的代理对象, 默认为当前元素</td>
					</tr>
					<tr>
						<td>revert</td>
						<td>如果设置为true,那么拖拽停止后元素将回到其初始位置</td>
					</tr>
					<tr>
						<td>cursor</td>
						<td>鼠标样式</td>
					</tr>
					<tr>
						<td>handle</td>
						<td>选择器/jQuery对象, 定义可以拖动的选择器对象启动拖拽的位置,如:'.title' / $('#title')</td>
					</tr>
					<tr>
						<td>disabled</td>
						<td>是否可用, 设置为 true, 将停止拖拽</td>
					</tr>
					<tr>
						<td>edge</td>
						<td>距离边缘多少宽度的时候开始拖动，单位是px</td>
					</tr>
					<tr>
						<td>axis</td>
						<td>定义可以向哪个方向拖动, y or x 如果设为y就只能垂直拖动，如果设为x，则只能水平拖动</td>
					</tr>
					<tr>
						<td>onDragStart</td>
						<td>function, 目标对象开始拖动时触发</td>
					</tr>
					<tr>
						<td>onDrag</td>
						<td>function, 目标对象被拖动的时候触发</td>
					</tr>
					<tr>
						<td>onDragStop</td>
						<td>function, 目标对象拖动结束的时候触发</td>
					</tr>
				</table>
			</div>
			
			<div>
				<h4>示例：</h4>
				<div style="height: 100px;">
					<div id="drag" class="panel panel-default" style="width: 200px; height: 100px;">
						<div class="panel-heading">Panel heading without title</div>
						<div class="panel-body">Panel content</div>
					</div>
				</div>
				<pre>
var drag = new mtons.Drag($('#drag'), {
	handle:'.panel-heading'
});

// 或者
$('#drag').drag({
    handle:'.panel-heading'
});
				</pre>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="../../src/core.js"></script>
	<script type="text/javascript" src="../../src/draggable.js"></script>
	<script type="text/javascript">
	$(function() {
		var drag = new mtons.Drag($('#drag'), {
			handle:'.panel-heading'
		});
	})
	</script>
</body>
</html>
